import { Fragment } from 'react';
import { getColorTextLoadMap, tooltipLength } from '@/utils';
import moment from 'moment';
import { Tooltip } from 'antd';

export const DetailCheckListHandNodeView: React.FC<Record<string, any>> = ({ handNodeList }) => {
  /**
   * 排序
   * @param arr
   * @returns
   */
  const sortNodeTaskArr = (nodeArr: Record<string, any>[]) => {
    if (nodeArr && nodeArr?.length > 0) {
      let durArrStart: Record<string, any>[] = [];
      let durArrEnd: Record<string, any>[] = [];
      nodeArr?.forEach((item: any) => {
        if (item?.duration == 0) {
          durArrStart.push(item);
        } else {
          durArrEnd?.push(item);
        }
      });
      return durArrStart.concat(durArrEnd);
    } else {
      return [];
    }
  };

  /**
   * 处理是否流程结束节点
   * @param nodeItem 流程节点 数据
   * @returns
   */
  const handleFlowEndNodes = (nodeItem: Record<string, any>) => {
    let itemChildTaskList: any = [];
    // 流程信息-判断endtime是否有值-有在时间节点上展示
    const endTaskName: Record<string, any> = {
      ...nodeItem,
      nodeState: 'endState',
      mactivitiHisTaskInstList: '',
    };
    const processInformation = nodeItem?.endTime ? [endTaskName] : [];

    if (nodeItem?.mactivitiHisTaskInstList && nodeItem?.mactivitiHisTaskInstList?.length > 0) {
      itemChildTaskList = sortNodeTaskArr(nodeItem?.mactivitiHisTaskInstList);
    }
    const activitiHisTaskInstList: any = nodeItem.mactivitiHisTaskInstList ? processInformation?.concat(itemChildTaskList) : [];

    return activitiHisTaskInstList;
  };

  return (
    <>
      {handNodeList?.map((pItem: any) => {
        const flowNodeTaskList: Record<string, any>[] = handleFlowEndNodes(pItem);

        // return flowNodeTaskList?.map((cItem: any, cIndex: number) => {
        //   const resultInfoObj = getColorTextLoadMap(cItem?.resultInfo || cItem?.checkResultName); //处理结束节点审批结果
        //   if (cItem?.nodeState == 'endState') {
        //     return (
        //       <tr key={`notTaskOA-${cIndex}`}>
        //         <td style={{ width: '25%' }}>{'结束'}</td>
        //         <td style={{ width: '20%' }}>{cItem?.startPositionName || '--'}</td>
        //         <td style={{ width: '20%' }}>{cItem?.starterName || '--'}</td>
        //         <td style={{ width: '20%' }}>{resultInfoObj?.colorText || '--'}</td>
        //         <td style={{ width: '15%' }}>{cItem?.endTime ? moment(cItem?.endTime)?.format('YYYY-MM-DD HH:mm:ss') : '--'}</td>
        //       </tr>
        //     );
        //   } else if (cItem?.assigneeName) {
        //     return (
        //       <tr key={`notTaskOA-${cIndex}`}>
        //         <td style={{ width: '25%' }}>{cItem.taskName || '--'}</td>
        //         <td style={{ width: '20%' }}>{cItem?.assigneePositionName || '--'}</td>
        //         <td style={{ width: '20%' }}>{cItem?.assigneeName || '--'}</td>
        //         <td style={{ width: '20%' }}>{resultInfoObj?.colorText || '--'}</td>
        //         <td style={{ width: '15%' }}>{cItem?.endTime ? moment(cItem?.endTime)?.format('YYYY-MM-DD HH:mm:ss') : '--'}</td>
        //       </tr>
        //     );
        //   } else {
        //     return <Fragment key={`${cItem?.id}TimeFlow${cIndex}`} />;
        //   }
        // });

        return flowNodeTaskList?.map((cItem: any, cIndex: number) => {
          const resultInfoObj = getColorTextLoadMap(cItem?.resultInfo || cItem?.checkResultName); //处理结束节点审批结果
          if (cItem?.nodeState == 'endState') {
            return (
              <tr key={`notTaskOA-${cIndex}`}>
                <td style={{ width: '20%' }}>{'结束'}</td>
                <td style={{ width: '15%' }}>{cItem?.startPositionName || '--'}</td>
                <td style={{ width: '15%' }}>{cItem?.starterName || '--'}</td>
                <td style={{ width: '15%' }}>{resultInfoObj?.colorText || '--'}</td>
                <td style={{ width: '20%' }}>
                  {cItem?.comment ? (
                    <>
                      <Tooltip title={tooltipLength(cItem?.comment, 100)}>{tooltipLength(cItem?.comment, 18)}</Tooltip>
                    </>
                  ) : (
                    '--'
                  )}
                </td>
                <td style={{ width: '15%' }}>{cItem?.endTime ? moment(cItem?.endTime)?.format('YYYY-MM-DD HH:mm:ss') : '--'}</td>
              </tr>
            );
          } else if (cItem?.assigneeName) {
            return (
              <tr key={`notTaskOA-${cIndex}`}>
                <td style={{ width: '20%' }}>{cItem.taskName || '--'}</td>
                <td style={{ width: '15%' }}>{cItem?.assigneePositionName || '--'}</td>
                <td style={{ width: '15%' }}>{cItem?.assigneeName || '--'}</td>
                <td style={{ width: '15%' }}>{resultInfoObj?.colorText || '--'}</td>
                <td style={{ width: '20%' }}>
                  {cItem?.comment ? (
                    <>
                      <Tooltip title={tooltipLength(cItem?.comment, 100)}>{tooltipLength(cItem?.comment, 18)}</Tooltip>
                    </>
                  ) : (
                    '--'
                  )}
                </td>
                <td style={{ width: '15%' }}>{cItem?.endTime ? moment(cItem?.endTime)?.format('YYYY-MM-DD HH:mm:ss') : '--'}</td>
              </tr>
            );
          } else {
            return <Fragment key={`${cItem?.id}TimeFlow${cIndex}`} />;
          }
        });
      })}
    </>
  );
};
